<script lang='ts'>
import { AxiosResponse } from 'axios'
import { defineComponent, onMounted, PropType, ref, Ref, watch } from 'vue'
import { SelectOptionDataType, SelectOptionKeyType } from './interface'
export default defineComponent({
    name: 'JxtechRemoteSelect'
})
</script>
<script lang='ts' setup>
const emit = defineEmits<{
    (e: 'update:value', value: string | any[] | undefined): void//更新属性值
}>()
const props = defineProps({
    size: {
        type: String,
        default: "default"
    },
    /**
    * 加载数据函数
    */
    loadData: {
        type: Function,
        required: true
    },
    /**
     * 绑定值
     */
    value: {
        type: [String, Array]
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    selectValueType: {//取json里面的什么值
        type: Object as PropType<SelectOptionKeyType>,
        default: () => {
            return { labelKey: 'label', valueKey: 'value' }
        }
    },
    /**是否可清理选中项 */
    clearable: {
        type: Boolean,
        default: true
    }
})

//设置双向绑定
const modelValue = ref(props.value)
watch(() => modelValue.value, val => {
    emit("update:value", val)
})

watch(() => props.value, val => {
    modelValue.value = val
})

const dataList: Ref<SelectOptionDataType[]> = ref([])
//复制数据
const dataListCopy: Ref<SelectOptionDataType[]> = ref([])

//加载数据
const loadSelectData = () => {
    props.loadData().then((res: AxiosResponse<any>) => {
        const _dataList: SelectOptionDataType[] = []
        res.data.forEach((item: any) => {
            const data: SelectOptionDataType = { label: "", value: "", extra: {} }
            Object.keys(item).forEach(key => {
                if (key == props.selectValueType.labelKey) {
                    data.label = item[key]
                } else if (key == props.selectValueType.valueKey) {
                    data.value = item[key]
                } else {
                    data.extra[key] = item[key]
                }
            })
            _dataList.push(data)
        })
        dataList.value = [..._dataList]
        dataListCopy.value = JSON.parse(JSON.stringify(_dataList))
    })
}

//筛选数据自定义
const filterMethod = (key: string) => {
    if (!dataListCopy.value) return;
    if (!key) {
        dataList.value = dataListCopy.value;
        return;
    } else {
        let _dataList = dataListCopy.value.filter(item => {
            return item.label.indexOf(key) != -1 || item.value.indexOf(key) != -1
        })
        dataList.value = _dataList;
    }
}


onMounted(() => loadSelectData())

defineExpose({
    loadSelectData
})

</script>
<template>
    <el-select
        v-model="modelValue"
        :clearable="clearable"
        :placeholder="placeholder"
        :size="props.size"
        :filter-method="filterMethod"
    >
        <el-option
            v-for="item in dataList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
            <slot :item="item"></slot>
        </el-option>
    </el-select>
</template>